<template>
  <div>
    <shop-header/>
    <div class="tab">
      <div class="tab-item">
        <router-link :to="`/shop/${id}/goods`" replace>点餐</router-link>
      </div>
      <div class="tab-item">
        <router-link :to="`/shop/${id}/ratings`" replace>评价</router-link>
      </div>
      <div class="tab-item">
        <router-link :to="`/shop/${id}/info`" replace>商家</router-link>
      </div>
    </div>
    <router-view/>
  </div>
</template>

<script>
  import ShopHeader from '../../components/ShopHeader/ShopHeader.vue'
 import {mapState} from 'vuex'
 import {saveCartFoods} from '@/util/index'
  export default {
    props:['id'],
      data(){
          return{}
      },
      mounted(){
        const id=this.id;
        this.$store.dispatch("getShop",id)
          // this.$store.dispatch("getShopGoods")
          // this.$store.dispatch("getShopRatings")
          // this.$store.dispatch("getShopInfo")
          window.addEventListener("unload",()=>{
            const {shop:{id},cartFoods}=this.shop
            saveCartFoods(id,cartFoods)
          })
      },
          computed: {
      ...mapState({
        shop: state => state.shop   // {shop: {}, cartFoods: []}
      })
    },
    beforeDestroy(){
      const {shop:{id},cartFoods}=this.shop;
      saveCartFoods(id,cartFoods);

    },
    components: {
      ShopHeader
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/mixins.styl"
  .tab
    height 40px
    line-height 40px
    background #fff
    bottom-border-1px(rgba(7, 17, 27, 0.1))
    .tab-item
      float left
      width: 33.33333%
      text-align center
      font-size 14px
      color rgb(77, 85, 93)
      a
        display block
        position relative
        &.router-link-active
          color #3190e8
          &::after
            content ''
            position absolute
            left 50%
            bottom 1px
            width 35px
            height 2px
            transform translateX(-50%)
            background #3190e8
</style>

